<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #editor {
            position: absolute;
            width: 40%;
            height: 400px;
        }

        html,body {
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
<div id="editor">欢迎来到北京</div>
<script src="http://localhost:8080/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="http://localhost:8080/ace/theme-twilight.js" type="text/javascript" charset="utf-8"></script>
<script src="http://localhost:8080/ace/theme-xcode.js" type="text/javascript" charset="utf-8"></script>
<script src="http://localhost:8080/ace/mode-java.js" type="text/javascript" charset="utf-8"></script>
<script src="http://localhost:8080/ace/mode-javascript.js" type="text/javascript" charset="utf-8"></script>
<script src="http://localhost:8080/ace/mode-json.js" type="text/javascript" charset="utf-8"></script>
<script src="http://localhost:8080/ace/mode-markdown.js" type="text/javascript" charset="utf-8"></script>
<script src="http://localhost:8080/ace/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
<script src="http://localhost:8080/ace/ext-split.js" type="text/javascript" charset="utf-8"></script>
<script>
    ace.require("ace/ext/language_tools");
    let ace1 = ace.require("ace/ext/split");
    debugger
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/twilight");
    //editor.setTheme("ace/theme/xcode");
    editor.session.setMode("ace/mode/json");

    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: false,
        readOnly:false,
    });

    editor.on("change",function (){
        console.log(arguments)
    })

    editor.getSession().selection.on('changeSelection', function (){
        console.log(arguments)
    });
</script>
</body>
</html>